<template>
  <figure>
    <figcaption>
      <h4><slot name="name"></slot></h4>
      <p><slot name="cont"></slot></p>
    </figcaption>
    <img :src="src" :alt="alt" />
  </figure>
</template>

<script>
export default {
  props: {
    alt: String,
    src: String,
  },
};
</script>

<style lang="less" scoped>
figure {
  padding: 15px;
  display: grid;
  grid-template-columns: 3fr 2fr;
  font-size: 14px;
  max-width: 340px;

  h4 {
    font-size: 18px;
    border-left: 8px solid #ff701a;
    border-top: 2px solid #ff701a;
    padding-left: 5px;
    margin-bottom: 5px;
  }
  p {
    text-align: justify;
    text-indent: 2em;
    padding: 0 5px;
  }
  img {
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
    border-radius: 50%;
  }
}
</style>